<template>
  <div class="special-main">
    <div class="item-top-box">
      <div class="item-top-box-title"></div>
      <div class="detail-btn">详情<i class="el-icon-caret-right"></i></div>
    </div>
    <div class="item-center">
      <dv-border-box-7 :color="['#0054A3', '#2BCCFF']">
        <div id="special-main-echarts"></div>
      </dv-border-box-7>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

// 特殊群体情况
export default {
  name: 'Special',
  data() {
    return {
      //
    };
  },
  mounted () {
    let myChart = echarts.init(document.getElementById('special-main-echarts'));
    var stages = [
      { name: '涉及妇女儿童纠纷' },
      { name: '涉及农民工纠纷' },
      { name: '拖欠农民工工资' },
      { name: '涉及残疾人纠纷' },
      { name: '涉及退役军人纠纷' },
      { name: '涉及民营企业纠纷' }
    ];

    var scores = [
      {
        // name: '进站',
        value: [43, 90, 80, 53, 78, 89, 77, 50]
      },
      // {
      //   // name: '出站',
      //   value: [50, 44, 56, 69, 43, 77, 90, 20]
      // }
    ];
    
    let option = {
      // backgroundColor: '#000928',
      color: ['#41E1FF', 'rgb(255,292,203)'],
      legend: {
        top: 25,
        right: 40,
        icon: 'rect',
        itemWidth: 17, // 图例标记的图形宽度。[ default: 25 ]
        itemHeight: 12, // 图例标记的图形高度。[ default: 14 ]
        itemGap: 9, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
          fontSize: 16,
          color: '#fff'
        },
        data: ['进站', '出站']
      },
      radar: {
        radius: '60%',
        triggerEvent: true,
        // name: {
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '16',
        //     borderRadius: 3,
        //     padding: [3, 5],
        //   },
        // },

        name: {
          rich: {
            a: {
              fontSize: 16,
              color: '#fff',
              lineHeight: '40',
              padding: [0, 15, 0, 15]
            },
            b: {
              color: '#41E1FF',
              fontSize: 16,
              padding: [0, 0, 0, 15]
            },
            c: {
              color: '#fff',
              fontSize: 16
            },
            d: {
              color: 'rgb(255,292,203)',
              fontSize: 16,
              padding: [0, 15, 0, 0]
            },
            triggerEvent: true
          },
          formatter: (a) => {
            let i = this.contains(stages, a); // 处理对应要显示的样式
            return `{a| ${a}}\n{b| ${scores[0]['value'][i]}}`;
          }
        },
        nameGap: '2',
        indicator: stages,
        splitArea: {
          areaStyle: {
            color: [
              // '#172C65' ,'#122454','#0A1835',

              'rgba(39,67,143, 0.1)',
              'rgba(39,67,143, 0.2)',
              'rgba(39,67,143, 0.4)',
              'rgba(39,67,143, 0.6)',
              'rgba(39,67,143, 0.8)',
              'rgba(39,67,143, 1)'
            ].reverse()
          }
        },
        // axisLabel:{//展示刻度
        //     show: true
        // },
        axisLine: {
          //指向外圈文本的分隔线样式
          lineStyle: {
            color: 'rgba(0,0,0,0)'
          }
        },
        splitLine: {
          lineStyle: {
            width: 2,
            color: ['rgba(45,65,110, 0.6)'].reverse()
          }
        }
      },

      series: [
        {
          // name: '进站',
          type: 'radar',
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: '#37c5f4',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: '#19469a',
                    opacity: 1
                  }
                ],
                false
              )
            }
          },
          symbolSize: 0,
          lineStyle: {
            normal: {
              color: '#32a9ea',
              width: 1
            }
          },
          data: [scores[0]]
        },
        {
          // name: '出站',
          type: 'radar',
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: '#ffc40b'
                  },
                  {
                    offset: 1,
                    color: '#e3c424'
                  }
                ],
                false
              ),

              opacity: 0.6
            }
          },
          symbolSize: 0,
          lineStyle: {
            normal: {
              color: 'rgba(255,292,203, 0.6)',
              width: 1
            }
          },
          data: [scores[1]]
        }
      ]
    };
    console.log(option, 'test')
    myChart.setOption(option);
  },
  methods: {
    contains(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i].name === obj) {
          return i;
        }
      }
      return false;
    }
  }
};
</script>

<style scoped>
.special-main {
  height: 92.5%;
  width: 98%;
  padding: 0px 10px 20px 0px;
}
.special-main .item-top-box {
  display: flex;
  flex-direction: row;
  position: relative;
}
.special-main .item-top-box-title {
  background-image: url('~@/assets/title3.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  height: 32px;
  width: 100%;
}
/* 详情 */
.special-main .item-top-box .detail-btn {
  font-size: 16px;
  font-family: BBT;
  font-weight: normal;
  color: #2bccff;
  position: absolute;
  right: 0;
  cursor: pointer;
}
/* 内容区域 */
.special-main .item-center {
  height: 90%;
  width: 100%;
  padding: 5px 0px;
}
#special-main-echarts {
  height: 96%;
  width: 100%;
}
</style>
